<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">          <top></top>         <!-- <div class="hei10"></div>
         <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：分销后台>短信中心><router-link to="/duanxin/renwuguanli">任务管理</router-link>>新建短信任务</div>         --><div class="hei10"></div>


        <div class="powertop">
          <router-link class="powertopli " to="/duanxin">任务管理</router-link>
          <router-link class="powertopli " to="/duanxin/addrenwu2">指定号码发送短信</router-link>
          <router-link class="powertopli" to="/duanxin/fasongjilu">发送记录</router-link>
          <router-link class="powertopli powertopact" to="/duanxin/duanxinmoban">短信模板管理</router-link>
        </div>
        <div class="conlist" v-loading='loading' style="padding: 20px;">

          <div class="" style="background: #FFFBE6; border: 1px #FFE58F solid; border-radius: 10px; padding: 20px; margin-bottom: 20px;">

            <div style="margin-bottom: 10px;  font-weight: bold;"><i class="el-icon-warning" style="color: #FFE58F; font-size: 20px; margin-right: 10px;"></i>短信模版禁用词：</div>
            <div style="font-size: 14px; color: rgb(102, 102, 102); margin-bottom: 10px; padding-left: 33px;"></i>1.号卡类词：移动、联通、电信、通信、手机卡、流量卡、号卡、好评返现、流量、手机号、微信、加V、加v等（运营商目前对此严查）（号卡，手机卡可以替换成卡。）；</div>
            <div style="font-size: 14px; color: rgb(102, 102, 102); margin-bottom: 10px; padding-left: 33px;">2. 引导类短信：短信中禁止引导注册某某网站、关注公众号、添加微信、下载安装任何APP、发红包、好评返现等，带链接的短信往往容易被拦截</div>
            <div style="font-size: 14px; color: rgb(102, 102, 102); padding-left: 33px;">3、套餐内容描述词：29元包200G、套餐优惠、资费等词，请尽可能委婉表达。</div>
          </div>




          <div style="margin-bottom: 20px;">
            <el-button type="danger" round @click="xinjianmoban">新建短信模板</el-button>
          </div>

          <el-table :data="tableData" style="text-align: center;" align="center" border :loading="loading">

            <el-table-column label="短信模板名称">
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                <span>{{ scope.row.status_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核失败原因">
              <template slot-scope="scope">
                <span>{{ scope.row.reason }}</span>
              </template>
            </el-table-column>

            <el-table-column label="类型">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">下单提醒</span>
                <span v-if="scope.row.type == 2">订单信息完善</span>
                <span v-if="scope.row.type == 3">开卡结果通知</span>
                <span v-if="scope.row.type == 4">发货通知</span>
                <span v-if="scope.row.type == 5">催促激活</span>
                <span v-if="scope.row.type == 7">营销类短信</span>
                <span v-if="scope.row.type == 6">其他</span>
              </template>
            </el-table-column>

            <el-table-column label="内容">
              <template slot-scope="scope">
                <span>{{ scope.row.content }}</span>
              </template>
            </el-table-column>

            <el-table-column label="创建时间">
              <template slot-scope="scope">
                <span>{{ scope.row.created_at }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button type="text" @click="shenhe(1,scope.row.shop_id)">审核通过</el-button> -->
                <el-button type="text" @click="xiugai(scope.row)">修改</el-button>
                <el-button type="text" @click="shanchu(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <uses ref='uses'></uses>

        </div>
      </div>
    </div>
    <el-dialog title="添加模板" center :visible.sync="laiyuanshow" :close-on-press-escape="false" :close-on-click-modal="false"
      width="800px">
      <el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">

        <el-form-item label="模板名称:">
          <el-input v-model="renwu.name" placeholder="模板名称"></el-input>
        </el-form-item>
        <el-form-item label="模板类型:">
          <el-radio v-model="renwu.type" label="1">下单提醒</el-radio>
          <el-radio v-model="renwu.type" label="2">订单信息完善</el-radio>
          <el-radio v-model="renwu.type" label="3">开卡结果通知</el-radio>
          <el-radio v-model="renwu.type" label="4">发货通知</el-radio>
          <el-radio v-model="renwu.type" label="5">催促激活</el-radio>
          <el-radio v-model="renwu.type" label="7">营销类短信</el-radio>
          <el-radio v-model="renwu.type" label="6">其他</el-radio>
        </el-form-item>
        <!-- <el-form-item v-if="shopid == 304676 || shopid == 50481" label="短信签名:">
            <el-radio v-model="renwu.sign" v-for="item in qianminglist" :key="item.id" :label="item.id" >{{item.name}}</el-radio>

        </el-form-item> -->


        <el-form-item label="模板内容:">
          <div class="shuru">

            <div class="shurutop">已输入<span class="red">{{zishu}}</span>个字，超过70字记为2条短信，此处未包含短信签名，请预留签名字数。
              <el-tooltip class="item" effect="light" content="70字记一条短信费，超过70字记为2条短信，此处未包含短信签名，请预留签名字数。"
                placement="top">
                <span style="color: #8E65B7; cursor: pointer;">计费规则</span>
              </el-tooltip>
            </div>
            <el-input type="textarea" @input="jishu" :rows="5" placeholder="请输入内容" v-model="renwu.content"></el-input>
            <div style="display: flex;  padding-top: 20px;">
              <el-checkbox v-model="renwu.is_url" @change='photochange'>添加照片上传变量(占23个字数)</el-checkbox>
              <el-checkbox v-model="renwu.is_fahuo" @change='photochange2'>添加发货信息变量(占23个字数)</el-checkbox>
            </div>
          </div>

        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" round @click="laiyuanshow = false">取 消</el-button>
        <el-button type="danger" round @click="chuangjian">提交审核</el-button>
      </span>
    </el-dialog>

    <!-- <foot></foot> -->
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import use from '@/components/duanxin/use.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import duanxinci from '../../../public/duanxin'
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  import moment from "moment";
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      "uses": use,
      UploadExcelComponent
    },
    name: "duanxinmoban",
    data() {
      return {
        laiyuanshow: false,
        signname: "",
        signxingming: "",
        signmobile: "",
        chuangjianw: "提交审核",
        id: "",
        loading: true,
        form: "",
        renwu: {
          type: '1',
          name: '',
          content: "",
          is_url: false,
          is_fahuo: false,
          sign:''
        },
        ing: false,
        sourcelist: "",
        qianminglist: [],
        zishu: "0",
        tiaoshu: "1",
        shoplist: "",
        duanxintiaoshu: "",
        showsign: false,
        photo: false,
        daunxinci: '',
        tuiguanglaiyuan: {
          source: "",
          name: ""
        },
        tableData: "",
        shopid:''
        // qianminglist:[],
      }
    },
    created() {
      this.getlist()
      this.getsign();
       //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
    },
    mounted() {
      // this.$refs.uses

    },
    methods: {
      xinjianmoban:function(){
        this.renwu = {
          type: '1',
          name: '',
          content: "",
          is_url: false,
          is_fahuo: false,
          sign:''
        }
        this.laiyuanshow = true
      },
      photochange: function() {

        if (this.renwu.is_url == true) {
          this.renwu.content = this.renwu.content + '【短信地址】'
          this.zishu = parseInt(this.zishu) + 23
          this.tiaoshu = parseInt(this.zishu / 70) + 1
        } else {

          this.renwu.content = this.renwu.content.replace('【短信地址】', '')

          this.zishu = parseInt(this.zishu) - 23
          this.tiaoshu = parseInt(this.zishu / 70) + 1
        }
      },
      photochange2: function() {

        if (this.renwu.is_fahuo == true) {
          this.renwu.content = this.renwu.content + '【发货信息】'
          this.zishu = parseInt(this.zishu) + 23
          this.tiaoshu = parseInt(this.zishu / 70) + 1
        } else {

          this.renwu.content = this.renwu.content.replace('【发货信息】', '')

          this.zishu = parseInt(this.zishu) - 23
          this.tiaoshu = parseInt(this.zishu / 70) + 1
        }
      },
      xiugai: function(item) {
        this.renwu.id = item.id
        this.renwu.type = item.type.toString()
        this.renwu.name = item.name
        this.renwu.content = item.content
        this.jishu()
        this.laiyuanshow = true
        this.renwu.sign = item.sign
      },
      jishu: function() {
        this.zishu = this.renwu.content.length


        if (this.renwu.is_url == true) {
          this.zishu = parseInt(this.zishu) + 23

        } else {

        }
        this.tiaoshu = parseInt(this.zishu / 70) + 1

        for (var i in this.daunxinci) {
          if (this.renwu.content.includes(this.daunxinci[i])) {
            this.$message.error("'" + this.daunxinci[i] + "'短信不支持这个词，会导致发送失败！");
          }

        }
      },
      shanchu: function(item) {
        this.$confirm('确定要删除此模板吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var that = this;
          axios.post('/api/plan-market/message/formwork/delete', {
              id: item.id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })
      },
      //获取全部
      getlist: function() {
        var that = this
        axios.get('/api/plan-market/message/formwork/list')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data

              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //创建任务
      chuangjian: function() {
        var that = this
        // if(this.$refs.uses.use == false){
        // 	this.$refs.uses.show = true
        // }else{
        // 	axios.post("/api/plan-market/message/operation/formwork", this.renwu)
        // 		.then(function(response) {
        // 			if (response.data.msg.code == 0) {
        // 				that.$message.success('已提交');
        // 				that.getlist()
        // 				that.laiyuanshow = false
        // 			} else {
        // 				that.$message.error(response.data.msg.info);
        // 			}
        // 		})
        // }

        // if(this.shopid == 304676 || this.shopid == 50481){
        //   if(this.renwu.sign==''){
        //     this.$message.error('请选择签名');
        //     return
        //   }
        // }

        let arr = ['移动','联通','电信','通信','手机卡','流量卡','号卡','红包','好评返现','流量','手机号','微信','加V','加v','添加']
        let ke = true
        arr.forEach(item =>{
          if(this.renwu.content.includes(item)){
            ke = false
          }
        })
        
        if(this.shopid != 304676 && this.shopid != 540454 && this.shopid != 371947 && this.shopid != 625938 &&this.shopid!=444564 &&this.shopid!=426122 &&this.shopid!=425692){
            if(!ke){
                that.$message.error("不能有敏感词：移动、联通、电信、通信、手机卡、流量卡、号卡、红包、好评返现、流量、手机号、微信、加V、加v");
                return false
            }
        }
        

        axios.post("/api/plan-market/message/operation/formwork", this.renwu)
          .then(function(response) {
            if (response.data.msg.code == 0) {
              that.$message.success('已提交');
              that.getlist()
              that.laiyuanshow = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })

      },
      //获取签名
      getsign:function(){
            var that = this;
          	axios.get('/api/plan-market/message/getsign')
          		.then(response => {
          			if(response.data.msg.code == 0){
          				that.qianminglist = response.data.data
                  if(that.qianminglist == ''){
                    that.renwu.sign = ''
                  }
          			}else{
          				if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
          				that.$message.error(response.data.msg.info);
          			}
          		})
          },

    }
  }
</script>

<style lang="scss" scoped>
  .index {

    .conlist {
      padding-bottom: 20px;
      background: #FFFFFF;
      min-height: 800px;

      .addrenwutitle {
        text-align: center;
        line-height: 50px;
        font-weight: bold;
        font-size: 16px;
        border-bottom: 1px #EAEAEA solid;
      }

      .form {
        padding: 20px;

        .el-input {
          width: 300px;
        }
      }

      .flex {
        display: flex;
        flex-wrap: wrap;

        .el-select {
          margin-bottom: 20px;
        }

        label {
          display: block;
          width: 100%;
        }

        .el-input__icon {
          height: auto !important;
        }
      }

      .shuru {
        border: 1px #C8C9CC solid;

        .shurutop {
          background: #EAEAEA;
          padding-left: 20px;
          color: #666
        }

        .el-textarea {
          padding: 10px 5px;

          textarea {
            border: 0;
            outline: 0;
            width: 98%;
          }
        }

      }

      .red {
        color: #f00;
        font-weight: bold;
        margin: 0 5px;
        font-size: 18px;
      }

      .flexm {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .wenxin {
        background: #DDDDDD;
        padding: 10px 20px;
        color: #646464;
        line-height: 20px;
      }

      .wenhao {
        background: #DDDDDD;
        color: #FFFFFF;
        line-height: 15px;
        cursor: pointer;
        padding: 5px 11px;
        margin-left: 20px;
        text-align: center;
        border-radius: 14px;
      }
    }

    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }

    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }

    .powertopli {
      flex-basis: 180px;
      line-height: 50px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 16px;
      text-align: center;
    }

    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
    }


  }
</style>
